<template>
  <div class="parent">
    <div class="control" v-if="current">
      <div>
        允许出界:
        <input type="checkbox" v-model="current.allowOutOfBounds" />
      </div>
      <div>
        x:
        <input v-model="current.x" type="number" @change="setX" />
      </div>

      <div>
        y:
        <input v-model="current.y" type="number" />
      </div>
      <div>
        w:
        <input v-model="current.w" type="number" />
      </div>
      <div>
        h:
        <input v-model="current.h" type="number" />
      </div>
      {{ current._id }}
    </div>

    <div class="stage relative">
      <Drag
        v-for="(item, key) in list"
        :key="key"
        :scale="scale"
        @pointerdown="setCurrent(item, key)"
        v-model:position="list[key]"
        :allow-out-of-bounds="item.allowOutOfBounds"
        ref="canvasRefs"
      ></Drag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { random } from 'mathjs';
import { nanoid } from 'nanoid';
import { ref, useTemplateRef } from 'vue';
import Drag from './Drag.vue';
import type { ICanvas } from './types';
const scale = ref(1);
const current = ref<ICanvas>();
let i = 0;
const canvasRefs = useTemplateRef('canvasRefs');
const list = ref<ICanvas[]>([]);
const setCurrent = (item: ICanvas, index: number) => {
  current.value = item;
  i = index;
};
for (let i = 0; i < 10; i++) {
  list.value.push({
    x: random(0, 350),
    y: random(0, 350),
    w: random(10, 400),
    h: random(10, 400),
    allowOutOfBounds: false,
    zIndex: i,
    rotate: 0,
    id: nanoid(),
  });
}

const setX = () => {
  if (!canvasRefs.value || !current.value) return;
  canvasRefs.value[i]?.setTempPositionByKey('x', current.value.x);
};
</script>

<style lang="scss" scoped>
.parent {
  height: 100vh;
}
.control {
  position: absolute;
  right: 0%;
}
.stage {
  width: 400px;
  height: 400px;
  position: absolute;
  left: 30%;
  top: 30%;
  outline: 1px solid #000;
}
.core {
  background-color: red;
  height: 100%;
  width: 100%;
}
</style>
